<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>OLP</title>
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap-theme.css">
    <script src='js/jquery.js'></script>
    <script type="text/javascript" src="lib/bootstrap/js/bootstrap.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            /* background-color: red; */
        }

        .container {
            margin: 20px;
        }

        .row {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }

        .label {
            width: 100px;
        }

        .value {
            flex-grow: 1;
        }

        .route {
            border: 2px solid #333333;
            padding: 5px;
        }

        .route_active {
            background-color: greenyellow;

        }

        .route_unactive {
            background-color: #f2f2f2;

        }

        .route_bad {
            /* background-color: rgb(255, 109, 109); */
            color: red;

            /* color: white; */
        }

        .dialog {
            display: none;
            position: fixed;
            background-color: white;
            border: 2px solid #3f94f5;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .dlg-set {
            margin: 20px;
        }

        .panel-heading {
            background-color: #3f94f5;
        }

        .panel-heading h1 {
            color: white;
        }

        .panel {
            /* pointer-events: none; */
            /* background-color:white; */
        }
    </style>
</head>


<body>

    <!-- <button class="btn btn-primary btn-dlg" onclick="reflash_query()">刷新</button>
    
    <a href="./cgi-bin/query.cgi">query.cgi</a>
    <a href="./cgi-bin/test.cgi">test.cgi</a>
    <a href="./cgi-bin/a.cgi">a.cgi</a> -->
    <div class="container dialog">
        <div class="panel panel-primary">
            <div class="panel-heading">
                <h1>调试</h1>
            </div>
            <div class="row border">
                <div class="col-md-10">
                </div>
            </div>
            <div class="row border">

                <div class="col-md-8">
                    <input id='dbg-input' type="text" class="form-control text-center" placeholder='<AD01_RESET>'
                        value="<AD01_RESET>" required>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-primary btn-dlg" onclick="onclick_send_raw_cmd()">原始控制</button>
                </div>
            </div>
        </div>
    </div>

    <div class="container text-center ">
        <div class="panel panel-primary ">
            <div class="panel-heading">
                <h1>OLP</h1>
            </div>
            <div id='dbg-msg' class="col-md-10 text-left">
                <label>Message</label>
            </div>
            <div class="col-md-10 text-left"></div>
                <button class="btn btn-primary btn-dlg" onclick="onclick_add_cmd()">独占模式</button>
                <button class="btn btn-primary btn-dlg" onclick="onclick_del_cmd()">自由模式</button>
            </div>
            <div class="row border my-4">
                <div class="col-md-2 my-2 mx-2">
                    <button class="btn btn-primary"
                        onclick='onclick_set_delay("sw_auto_sec", "sw_manual_sec", "dlg-a-sec", "dlg-m-sec")'> 延迟
                    </button>
                </div>
                <!-- <div class="col-md-5"> -->
                <div class="col-md-2 my-2">
                    <label> 自动模式延迟: </label>
                </div>
                <div class="col-md-2 my-2">
                    <label id="sw_auto_sec"> 000 </label>
                    <!-- <input id="sw_auto_sec">  -->
                </div>
                <div class="col-md-2 my-2">
                    <label> 手动切换延迟: </label>
                </div>
                <div class="col-md-2 my-2">
                    <label id="sw_manual_sec"> 000 </label>
                </div>
                <div class="col-md-1 my-2">
                    <button class="btn btn-primary btn-dlg" onclick="reflash_query()">刷新</button>
                </div>
                
            </div>


            <div class="row border my-4">
                <div class="col-md-2 my-2">
                    <button id="id-route" class="btn btn-primary" onclick="onclick_sw_route()"> 切换 </button>
                </div>
                <div class="col-md-2 my-2">
                    <!-- <label> 手动切换延迟: </label> -->
                    <label id="route_m" class=" mx-2 route"> 路由1</label>
                </div>
                <div class="col-md-2 my-2">
                    <!-- <label> 2 </label> -->
                    <label id="route_s" class=" mx-2 route"> 路由2</label>
                </div>

                <div class="col-md-2 my-2">
                    <button id="id-route" class="btn btn-primary" onclick="onclick_sw_auto_route()"> 自动 </button>
                </div>
                <div id="mode" class="col-md-2 ">
                    <!-- <label class=" mx-2 route"> 自动模式</label> -->
                    <label id="mode_a" class=" mx-2 route">自动模式</label>
                </div>
                <div class="col-md-2 my-2">
                    <!-- <label class=" mx-2 route"> 手动模式</label> -->
                    <label id="mode_m" class=" mx-2 route">手动模式</label>

                </div>

            </div>

            <table class="table my-4">
                <!-- <label id="wan0">WAN</label> -->
                <tr>
                    <th width=100px>探测器</th>
                    <th width=200px>实时值</th>
                    <th width=200px>阀值</th>
                    <th width=200px>波长</th>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="onclick_setwave(1, 'r1_s', 'r1_w')">R1</button>
                    </td>
                    <td>
                        <label id="r1_p">1310222</label>
                    </td>
                    <td>
                        <label id="r1_s">33333</label>
                    </td>
                    <td>
                        <label id="r1_w">3333</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="onclick_setwave(2, 'r2_s', 'r2_w')">R2</button>
                    </td>
                    <td>
                        <label id="r2_p">1310222</label>
                    </td>
                    <td>
                        <label id="r2_s">33333</label>
                    </td>
                    <td>
                        <label id="r2_w">3333</label>
                    </td>
                </tr>
                <tr>
                    <td>
                        <button class="btn btn-primary btn-dlg" onclick="onclick_setwave(3, 'tx_s', 'tx_w')">Tx</button>
                    </td>
                    <td>
                        <label id="tx_p">1310222</label>
                    </td>
                    <td>
                        <label id="tx_s">33333</label>
                    </td>
                    <td>
                        <label id="tx_w">3333</label>
                    </td>
                </tr>
            </table>
        </div>

        <div id="set-route" class="dialog">
            <div class="panel panel-primary text-center">
                <!-- <div class="lead"> -->
                <div class="panel panel-heading text-left py-2">
                    <h1 class="ml-3">设置链路</h1>
                </div>



                <div class="row ">
                    <div class="col-md-5 mx-3">
                        <label for="dlg-gain">阀值(dBm)</label>
                        <input type="text" class="form-control text-center" id="dlg-gain" placeholder="-30" required>
                    </div>

                    <div class="col-md-5 mx-3">
                        <label for="dlg-wave">波长(um)</label>
                        <select class="custom-select d-block w-100 text-center" id="dlg-wave" required>
                            <option value="0">1310</option>
                            <option value="1">1550</option>
                        </select>
                    </div>
                    <div class="col-md-10 mx-3 mt-3 text-center">
                        <label id="set-route-msg"></label>
                    </div>
                    <div class="col-md-5 mx-3 mt-3">
                        <button class="btn btn-danger btn-dlg" onclick="set_channel_x()">确定</button>
                    </div>
                    <div class="col-md-5 mx-3 mt-3">
                        <button class="btn btn-primary btn-default btn-dlg"
                            onclick="onclickSetRouteCancel()">取消</button>
                    </div>

                </div>

            </div>
        </div>




        <div id="set-delay" class="dialog">
            <div class="panel panel-primary text-center">
                <!-- <div class="lead"> -->
                <div class="panel panel-heading text-left py-2">
                    <h1 class="ml-3">设置延迟</h1>
                </div>



                <div class="row ">
                    <div class="col-md-5 mx-3">
                        <label for="dlg-a-sec">自动模式延迟</label>
                        <input type="text" class="form-control text-center" id="dlg-a-sec" placeholder="10" required>
                    </div>

                    <div class="col-md-5 mx-3">
                        <label for="dlg-m-sec">自动模式延迟(um)</label>
                        <input type="text" class="form-control text-center" id="dlg-m-sec" placeholder="5" required>
                    </div>
                    <div class="col-md-10 mx-3 mt-3 text-center">
                        <label id="set-route-msg"></label>
                    </div>
                    <div class="col-md-5 mx-3 mt-3">
                        <!-- <button class="btn btn-danger btn-dlg" onclick='onclick_set_delay("dlg-a-sec", "dlg-m-sec")''>确22定</button> -->
                        <button class="btn btn-danger btn-dlg"
                            onclick='onclick_delay_ok("dlg-a-sec", "dlg-m-sec")'>确定</button>
                    </div>
                    <div class="col-md-5 mx-3 mt-3">
                        <button class="btn btn-primary btn-default btn-dlg"
                            onclick="onclick_delay_channel()">取消</button>
                    </div>

                </div>

            </div>
        </div>
    </div>




</body>

<script>

    var g_current_ch = 0
    var g_is_route_bak = 0  // 是否在slave
    var g_rn = 0  // 当前通道
    const raw_main = 0
    const brief_main = 1
    const query_main = 2
    const set_gain_main = 3
    const set_wave_main = 4
    const run_stop_main = 5

    function unuse() {
        
    }
    function HideDlg(id) {
        var item = document.getElementById(id);
        item.style.display = 'none';
    }
    function ShowDlg(id) {
        var item = document.getElementById(id);
        item.style.display = 'flex';
    }
    function onclickSetRouteCancel() {
        HideDlg("set-route")
    }
    function onclick_setwave(chn, rn_set, rn_wave) {
        var rn_set = document.getElementById(rn_set).textContent;
        var rn_wave = document.getElementById(rn_wave).textContent;


        var in_s = document.getElementById("dlg-gain");
        var in_w = document.getElementById("dlg-wave");

        var waveIndex = {
            "1310": 0,
            "1550": 1
        };
        in_s.value = rn_set
        in_w.selectedIndex = waveIndex[rn_wave];
        ShowDlg("set-route")
        g_current_ch = chn
    }
    function reflash_query() {
        // return ;
        var htmlobj;

        var route_m = document.getElementById("route_m");
        var route_s = document.getElementById("route_s");

        var r1_on = document.getElementById("r1_on");
        var r2_on = document.getElementById("r2_on");
        var tx_on = document.getElementById("tx_on");

        // var route_bak = document.getElementById("route_bak");

        var r1_p = document.getElementById("r1_p");
        var r2_p = document.getElementById("r2_p");
        var tx_p = document.getElementById("tx_p");

        var r1_s = document.getElementById("r1_s");
        var r2_s = document.getElementById("r2_s");
        var tx_s = document.getElementById("tx_s");

        var sw_auto_sec = document.getElementById("sw_auto_sec");
        var sw_manual_sec = document.getElementById("sw_manual_sec");

        var r1_w = document.getElementById("r1_w");
        var r2_w = document.getElementById("r2_w");
        var tx_w = document.getElementById("tx_w");
        // tx_w.innerHTML = "New Content";

        var mode = document.getElementById("mode");
        var mode_m = document.getElementById("mode_m");
        var mode_a = document.getElementById("mode_a");


        var urlDataJson =
        {
            m: query_main,
        };
        var urlData = JSON.stringify(urlDataJson);

        htmlobj = $.ajax(
            {
                type: "POST",
                // url: "/cgi-bin/query.cgi",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );

        // TODO 兼容IE7 eval
        str = eval('(' + htmlobj.responseText + ')');
        // bash 输出的没办法都是string
        str.r1_p = parseFloat(str.r1_p)
        str.r2_p = parseFloat(str.r2_p)
        str.tx_p = parseFloat(str.tx_p)
        str.r1_s = parseFloat(str.r1_s)
        str.r2_s = parseFloat(str.r2_s)
        str.tx_s = parseFloat(str.tx_s)


        if (str.route_bak == 1) {
            route_s.classList.add("route_active")
            route_m.classList.remove("route_active")
            g_is_route_bak = true
        }
        else {
            route_m.classList.add("route_active")
            route_s.classList.remove("route_active")
            g_is_route_bak = false
        }
        if (str.r1_p < str.r1_s) {
            r1_p.classList.add("route_bad")
        }
        else {
            r1_p.classList.remove("route_bad")
        }
        if (str.r2_p < str.r2_s) {
            r2_p.classList.add("route_bad")
        }
        else {
            r2_p.classList.remove("route_bad")
        }

        if (str.tx_p < str.tx_s) {
            tx_p.classList.add("route_bad")
        }
        else {
            tx_p.classList.remove("route_bad")
        }
        

        r1_p.innerHTML = str.r1_p;
        r2_p.innerHTML = str.r2_p;
        tx_p.innerHTML = str.tx_p;
        r1_s.innerHTML = str.r1_s;
        r2_s.innerHTML = str.r2_s;
        tx_s.innerHTML = str.tx_s;
        sw_auto_sec.innerHTML = str.sw_auto_sec;
        sw_manual_sec.innerHTML = str.sw_manual_sec;

        r1_w.innerHTML = str.r1_w;
        r2_w.innerHTML = str.r2_w;
        tx_w.innerHTML = str.tx_w;
        // mode.innerHTML = str.mode;
        str.mode = parseInt(str.mode);
        
        if (str.mode == 0) {
            // mode.innerHTML = "自动模式"
            mode_a.classList.add("route_active")
            mode_m.classList.remove("route_active")
        }
        else {
            // mode.innerHTML = "手动模式"
            mode_m.classList.add("route_active")
            mode_a.classList.remove("route_active")
        }
    }

    function onclick_add_cmd(cmd, msg_id) {      
        var urlDataJson =
        {
            m: run_stop_main,
            do: 1,
        };
        var urlData = JSON.stringify(urlDataJson);
        console.log(cmd)
        htmlobj = $.ajax(
            {
                type: "POST",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );
        reflash_query();
    }
    function onclick_del_cmd(cmd, msg_id) {
        var urlDataJson =
        {
            m: run_stop_main,
            do: 0,
        };
        var urlData = JSON.stringify(urlDataJson);
        console.log(cmd)
        htmlobj = $.ajax(
            {
                type: "POST",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );
    }

    function send_raw_cmd(cmd, msg_id) {
        document.getElementById(msg_id).textContent = "发送指令..."

        var urlDataJson =
        {
            m: raw_main,
            cmd: cmd
        };
        var urlData = JSON.stringify(urlDataJson);
        console.log(cmd)
        htmlobj = $.ajax(
            {
                type: "POST",
                // url: "/cgi-bin/query.cgi",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );
        console.log(htmlobj.responseText)
        str = eval('(' + htmlobj.responseText + ')');
        if (str.r == 101) {
            var item = document.getElementById("dbg-msg");
            item.textContent = "错误: " + str.msg
        }
        else if (str.r == 100) {
            var item = document.getElementById("dbg-msg");
            item.textContent = "正确: " + str.msg
        }
        
        return str.r;
    }
    function onclick_send_raw_cmd() {
        send_raw_cmd(
            document.getElementById("dbg-input").value,
            "dbg-msg")
    }

    function onclick_set_delay(la, lm, id_a, id_m) {

        var l_a_sec = document.getElementById(la).textContent
        var l_m_sec = document.getElementById(lm).textContent

        var a_sec = document.getElementById(id_a).value
        var m_sec = document.getElementById(id_m).value
        document.getElementById(id_a).value = l_a_sec;
        document.getElementById(id_m).value = l_m_sec;
        ShowDlg("set-delay")
    }


    function onclick_delay_ok(id_a, id_m) {
        var cmd
        var min = document.getElementById(id_a).value
        var formattedNum = min.toString().padStart(3, "0");

        cmd = `<AD01_1_Q_${formattedNum}>`;
        send_raw_cmd(cmd, "dbg-msg")
        // send_raw_cmd("<AD01_1_Q_010>", "dbg-msg")


        min = document.getElementById(id_m).value
        formattedNum = min.toString().padStart(3, "0");
        cmd = `<AD01_1_R_${formattedNum}>`;
        send_raw_cmd(cmd, "dbg-msg")
        reflash_query();
        HideDlg("set-delay")
    }
    function onclick_delay_channel() {
        HideDlg("set-delay")
    }
    function onclick_sw_route() {
        var cmd
        if (g_is_route_bak == 1) {
            cmd = "<AD01_1_S_1>"
        }
        else {
            cmd = "<AD01_1_S_2>"
        }
        send_raw_cmd(cmd, "dbg-msg")
        reflash_query();
    }
    function onclick_sw_auto_route() {
        var cmd = "<AD01_1_M_1>"
        send_raw_cmd(cmd, "dbg-msg")
        reflash_query();
    }
    function set_channel_x() {
        set_channel_gain()
        set_channel_wave()
        reflash_query();
        HideDlg("set-route")
    }
    function set_channel_wave() {
        var in_w = document.getElementById("dlg-wave");
        var urlDataJson =
        {
            m: set_wave_main,
            addr: 1,
            link: 1,
            rn: g_current_ch,
            wave: parseInt(in_w.options[in_w.selectedIndex].value),
        };
        var urlData = JSON.stringify(urlDataJson);

        htmlobj = $.ajax(
            {
                type: "POST",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );
        // TODO 兼容IE7 eval
        str = eval('(' + htmlobj.responseText + ')');
        if (str.r == 101) {
            var item = document.getElementById("set-route-msg");
            item.textContent = "错误: " + str.msg
        }
        else if (str.r == 100) {
            var item = document.getElementById("set-route-msg");
            item.textContent = "正确: " + str.msg
        }
    }
    function set_channel_gain() {
        // var in_w = document.getElementById("dlg-wave");
        // in_w.options[in_w.selectedIndex].textContent,
        var urlDataJson =
        {
            m: set_gain_main,
            addr: 1,
            link: 1,
            rn: g_current_ch,
            gain: parseFloat(document.getElementById("dlg-gain").value),
        };
        var urlData = JSON.stringify(urlDataJson);

        htmlobj = $.ajax(
            {
                type: "POST",
                url: "/cgi-bin/query-cache.elf",
                data: urlData,
                async: false
            }
        );
        // TODO 兼容IE7 eval
        str = eval('(' + htmlobj.responseText + ')');
        if (str.r == 101) {
            var item = document.getElementById("set-route-msg");
            item.textContent = "错误: " + str.msg
        }
        else if (str.r == 100) {
            var item = document.getElementById("set-route-msg");
            item.textContent = "正确: " + str.msg
        }
    }
    reflash_query();

    // setInterval(() => {
    //     reflash_query();
    // }, 10000);

</script>

</html>